import React from 'react';
import IconFont from "../IconFont";
import { Icon } from 'antd';

import classNames from 'classnames';

const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;

export function isUrl(path) {
  return reg.test(path);
}

const defaultStyle = {
  color: '#000', fontSize: 16
}

const getIcon = (icon, style = {}, className = "") => {
  if (typeof icon === 'string') {
    if (isUrl(icon)) {
      return <Icon component={() => <img src={icon} alt="icon" className={classNames(className)} style={{
        width: '14px',
        verticalAlign: 'baseline',
        ...style
      }} />} />;
    }
    if (icon.startsWith('icon-')) {
      return <IconFont type={icon} className={classNames(className, style)} style={style} />;
    }
    if (icon.startsWith('iconfont')) {
      return <i className={classNames(className, icon)} style={{ ...defaultStyle, ...style }}></i>
    }
    return <Icon type={icon} className={classNames(className, style)} style={style} />;
  }
  return icon;
};

export default getIcon;

export const MyIcon = ({ icon, className, style }: { icon: any, className?: string, style?: object }) => getIcon(icon, style, className);